<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>分类专栏管理 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
</head>
<body>
<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>
<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <!--侧边栏-->
        <div th:replace="~{fragment/blog-manage::manage}"></div>
        <!--博客内容-->
        <div class="thirteen wide column">
            <!--header-->
            <div class="ui top attached segment " style="border-bottom: none !important;padding-bottom: 0 !important;">
                <div class="ui stackable grid">
                    <div class="four column row" style="padding-bottom: 0 !important;">
                        <div class="left floated column">
                            <h3>分类专栏</h3>
                        </div>
                        <div class="right floated column">
                            <button id="add-btn" class="ui right floated small basic red button">
                                <a href="#" style="color: inherit" th:href="@{/manage/category/add(userId=${user.getUserId()})}">新建</a>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="ui top attached segment stackable"  style="border-top: none !important;border-left: none !important;border-right: none !important;">
                    <div class="ui grid">
                        <div class="row" style="padding-top: 10px !important;padding-bottom: 10px !important;">
                            <div class="two wide column" style="padding-right: 0 !important;">
                                <a id="all" href="#" th:href="@{/manage/category/list(userId=${user.getUserId()})}" class="m-black"  style="font-size: 1.1rem !important;">全部(<span th:text="${visibleCategoryNum}">1</span>)</a>
                            </div>
                            <div class="two wide column"
                                 style="padding-right: 0 !important;padding-left: 0 !important;">
                                <a id="public" href="#" th:href="@{/manage/category/dash(userId=${user.getUserId()})}"  style="color:#349EDF !important;font-size: 1.1rem !important;"  class="m-black">
                                    <i class="trash alternate outline icon"></i>回收站(<span th:text="${deletedCategoryNum}">1</span>)
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui top attached segment stackable"
                     style="border-top: none !important;border-left: none !important;border-right: none !important;">
                    <div class="ui grid">
                        <div class="row" style="padding-top: 0 !important;padding-bottom: 0 !important;">
                            <div class="fourteen wide column" style="padding-right: 0 !important;">
                                <span class="m-black" style="color:grey !important;font-size: 1.1rem !important;">类别</span>
                            </div>
                            <div class="two wide column" style="padding-left: 0 !important;padding-right: 0 !important;">
                                <span class="m-black" style="color:grey !important;font-size: 1.1rem !important;">操作</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--content-->
            <div class="ui attached segment  stackable bottom" style="border-bottom: none !important;">
                <div class="ui grid">
                    <div th:if="${categoriesPage!=null&&#lists.size(categoriesPage.getList())>0}" th:each="category:${categoriesPage.getList()}" class="ui row attached segment bottom"  style="border-top: none !important;border-right:none !important;padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;">
                        <div class="five wide column">
                            <img class="ui middle aligned image image-50x50" style="max-height: none !important;"
                                 th:src="${category.getCategoryImageUrl()}"
                                 src="https://img-blog.csdnimg.cn/20190918140037908.png">
                            <span style="margin-left: 1rem" th:text="${category.getCategoryName()}">Redis</span>
                        </div>
                        <div class="nine wide column right aligned" style="padding-right: 0 !important;">
                            <div style="padding-top: 15px !important;">
                                <a href="#" th:href="@{/manage/category/restore(userId=${user.getUserId()},categoryId=${category.getCategoryId()})}" style="color:#349EDF !important;">一键恢复</a>
                            </div>
                        </div>
                        <div class="two wide column left aligned" style="padding-left: 5px !important;">
                            <div style="padding-top: 15px !important;">
                                <a href="#" th:href="@{/manage/category/deleteComplete(userId=${user.getUserId()},categoryId=${category.getCategoryId()},imageUrl=${category.getCategoryImageUrl()})}" style="color:#B50C13 !important;">彻底删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ui bottom attached segment " th:if="${categoriesPage.getTotal()==0}" style="margin: 0 auto !important;">
                <div style="padding: 8em 29rem 11em 29rem!important;">
                    <div style="padding-bottom: 1em !important;padding-left: 2.9898em !important;color: grey !important;font-size: 14px !important;">
                       空 空 如 也
                    </div>
                </div>
            </div>

            <!--分页按钮-->
            <div th:if="${categoriesPage.getTotal()>10}" class="ui bottom attached segment ">
                <div class="ui middle aligned two column grid">
                    <div class="column" style="margin: 5px auto;float: left !important;">
                        <div class="ui buttons">
                            <a th:href="@{/manage/category/dash(page=${categoriesPage.getPrePage()},userId=${user.getUserId()})}">
                                <button class="ui labeled icon button" style="background: white !important;font-weight: 100 !important;">上一页
                                </button>
                            </a>
                            <a  th:each="pageNo:${categoriesPage.getNavigatepageNums()}"
                                th:href="@{/manage/category/dash(page=${pageNo},userId=${user.getUserId()})}">
                                <button  class="ui button pages" >
                                    [[${pageNo}]]
                                </button>
                            </a>
                            <a  th:href="@{/manage/category/dash(page=${categoriesPage.getNextPage()},userId=${user.getUserId()})}">
                                <button class="ui right labeled icon button"
                                        style="background: white !important;font-weight: 100 !important;"> 下一页
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script>
    $('#add-btn').mouseenter(function () {
        $('#add-btn').removeClass("basic");
    })
    $('#add-btn').mouseleave(function () {
        $('#add-btn').addClass("basic");
    })
</script>
<script type="text/javascript">
    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
        showCurrentPageNum();
    });

    function showCurrentPageNum() {
        let obj=document.getElementsByClassName('pages');
        let page=[[${categoriesPage.pageNum}]];
        for(let i=0;i<obj.length;i++){
            if(obj[i].textContent==page){
                $(obj[i]).css("cssText", "background:#ddd !important");
            }
        }
    }
</script>
<script th:inline="javascript">
    $(document).ready(function () {
       $('#add-btn').click(function () {
           var msg=[[${msg}]];
           console.log(msg);
           if(msg!=undefined&&msg!=null&&msg!=""){
               alert(msg);
           }
       })
    })
</script>
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('#searchBar').click(function () {
        $('#reloadSearchBar').css("display", "block");  //显示div
    });

    $('.ui.checkbox')
        .checkbox()
    ;
</script>
<script>
    $('#side-bnt5').css("background","#DB2828");
    $('#side-bnt5').css("color","#ffffff");
</script>
</html>